<template>
  <div class="gauge-view chart-container">
    <div class="chart-item" v-for="(chart, index) in chartComponents" :key="chart.name" @click="openChartPreview(chart.component)">
      <component :is="chart.component" />
      <h3>{{ index + 1 }}. {{ chart.label || '折线图' }}</h3>
    </div>
  </div>
  <ChartPreview ref="chartPreviewRef" />
</template>

<script setup>
import { ref } from 'vue';
import ChartPreview from '@/components/chartPreview.vue';
import GaugeChart01 from './components/gaugeChart01.vue';
import GaugeChart02 from './components/gaugeChart02.vue';
import GaugeChart03 from './components/gaugeChart03.vue';
import GaugeChart04 from './components/gaugeChart04.vue';

const chartComponents = [
  { name: 'GaugeChart01', component: GaugeChart01, label: '仪表盘' },
  { name: 'GaugeChart02', component: GaugeChart02, label: '仪表盘' },
  { name: 'GaugeChart03', component: GaugeChart03, label: '仪表盘' },
  { name: 'GaugeChart04', component: GaugeChart04, label: '仪表盘' },
];

const chartPreviewRef = ref(null);
const openChartPreview = (component) => {
  chartPreviewRef.value.open(component);
};
</script>